<script setup lang="ts">~
import { onMounted, ref, computed } from "vue";
import { Api } from "../../assets/api/api";
import { useRouter, useRoute } from "vue-router";
import LoadComponent from "@/components/LoadComponent.vue";
import type { bookDetailType } from "../../home";
import { showToast } from "vant";

const conIndex = ref(0);
//获取书籍详情数据
const booksDetailsData = ref({});
//书籍最新章节数据
const bookNewData = ref({});
const bookNewTitle = ref("");
const updateTime = ref(0);
const bookName = ref("");
// 书籍状态
const bookIntegrity = ref(1);
//书籍信息
const BookInfo = ref<bookDetailType>({} as any);
//书籍标题
const BookTitle = ref<String>("");
//书籍作者
const BookAuthor = ref<String>("");
//书籍简介
const BookSummary = ref<String>("");
//书籍类型
const BookKeyName = ref<String>("");
//书籍图片
const BookImg = ref<String>("");
//书本目录
const BookCatalogue = ref<Array<Object>>([]);
//总章节
const theTotalSection = ref(0);
//热门推荐
const hot = ref<Array<Array<Object>>>([]);
//换一换
const hotIndex = ref(0);
//判断是否收藏
const flag = ref(false);

//vue3自带方法
const router = useRouter();
const route = useRoute();

// 获取最新章节数据
const newDataGet = async () => {
  let id = route.params.id;
  let { data } = await Api.DetailNewUrl(id as String);
  bookNewData.value = data.item;
  bookNewTitle.value = data.item.latestArticleTitle;
  updateTime.value = data.item.update;
};
// 获取书本名字
const bookInfoGet = async () => {
  let id = route.params.id;
  let { data } = await Api.DetailInformationUrl(id as String);
  bookIntegrity.value = data.data.book.integrity;
  bookDetailGet(bookName.value);
};
// 获取书本详情信息
const bookDetailGet = async (name: String) => {
  let id = route.params.id;
  let { data } = await Api.DetailBookUrl(id as String, name);
  BookInfo.value = data.feed;
  BookKeyName.value = BookInfo.value.entry["pris:book"].category;
  BookTitle.value = BookInfo.value.entry.title;
  BookAuthor.value = BookInfo.value.entry.author.name;
  BookSummary.value = BookInfo.value.entry.summary;
  BookImg.value = BookInfo.value.entry.link[1].href;
};
//获取书本目录
const bookCatalogueGet = async () => {
  BookCatalogue.value = [];
  let id = route.params.id;
  let { data } = await Api.DetailBookCatalogueUrl(id as String);
  if (Array.isArray(data.ncx.navMap.navPoint)) {
    for (let i = 0; i < 3; i++) {
      BookCatalogue.value.push(data.ncx.navMap.navPoint[i] as Object);
    }
    theTotalSection.value = data.ncx.navMap.navPoint.length;
  } else {
    for (let i = 0; i < 3; i++) {
      BookCatalogue.value.push(data.ncx.navMap.navPoint.navPoint[i]);
    }
    theTotalSection.value = data.ncx.navMap.navPoint.navPoint.length;
  }
};
//获取热门推荐
const hotGet = async () => {
  let { data } = await Api.DetailHotUrl();
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  let arr4 = [];
  for (let i = 0; i < data.list.length; i++) {
    if (i < 5) {
      arr1.push(data.list[i]);
    } else if (i < 10) {
      arr2.push(data.list[i]);
    } else if (i < 15) {
      arr3.push(data.list[i]);
    } else if (i < data.list.length) {
      arr4.push(data.list[i]);
    }
  }
  hot.value.push(arr1);
  hot.value.push(arr2);
  hot.value.push(arr3);
  hot.value.push(arr4);
};
//换一换功能
const cutSwitchover = () => {
  if (hotIndex.value < 3) {
    hotIndex.value += 1;
  } else {
    hotIndex.value = 0;
  }
};
//点击收藏
const clickFavorite = () => {
  if (JSON.parse(localStorage.getItem("LoginStatus") as any)) {
    // 先判断是否有收藏记录
    if (localStorage.getItem("collect")) {
      let arr = JSON.parse(localStorage.getItem("collect") as any);
      // 有收藏记录，遍历看这本小说是否收藏，有收藏就删除没有就收藏
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == route.params.id) {
          if (arr.length == 1) {
            localStorage.removeItem("collect");
            getRecord();
            flag.value = false;
            return;
          } else {
            arr.splice(i, 1);
            localStorage.setItem("collect", JSON.stringify(arr));
            getRecord();
            flag.value = false;
            return;
          }
        } else if (i == arr.length - 1) {
          localStorage.setItem(
            "collect",
            JSON.stringify([
              {
                id: route.params.id,
                title: BookTitle.value,
                author: BookAuthor.value,
                img: BookImg.value,
              },
              ...JSON.parse(localStorage.getItem("collect") as any),
            ])
          );
          getRecord();
        }
      }
    } else {
      // 没有收藏记录，直接收藏
      localStorage.setItem(
        "collect",
        JSON.stringify([
          {
            id: route.params.id,
            title: BookTitle.value,
            author: BookAuthor.value,
            img: BookImg.value,
          },
        ])
      );
      getRecord();
    }
  } else {
    //提示先登录账号=
    showToast("请先登录账号");
  }
};
//获取收藏记录
const getRecord = () => {
  if (JSON.parse(localStorage.getItem("LoginStatus") as any)) {
    if (localStorage.getItem("collect")) {
      let arr = JSON.parse(localStorage.getItem("collect") as any);
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].id == route.params.id) {
          flag.value = true;
          return;
        }
      }
    }
  }
};
//跳转目录页
const goCatalogueView = () => {
  router.push({
    name: "catalogue",
    params: {
      id: route.params.id,
    },
  });
};
//点击跳转小说页
const goLookBook = () => {
  // 小说章节
  //先判断有没有阅读历史
  if (localStorage.getItem("novelChapter")) {
    let arr = JSON.parse(localStorage.getItem("novelChapter") as any);
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].id == route.params.id) {
        router.push({
          name: "lookBook",
          params: {
            id: route.params.id,
          },
          query: {
            contentIndexid: arr[i].index *1
          },
        });
        return;
      } else if (i == arr.length - 1) {
        localStorage.setItem(
          "novelChapter",
          JSON.stringify([
            {
              id: route.params.id,
              index: 0,
            },
            ...arr,
          ])
        );
        router.push({
          name: "lookBook",
          params: {
            id: route.params.id,
          },
          query: {
            contentIndexid: 0,
          },
        });
      }
    }
  } else {
    // 没有阅读历史，直接跳转
    localStorage.setItem(
      "novelChapter",
      JSON.stringify([
        {
          id: route.params.id,
          index: 0,
        },
      ])
    );
    router.push({
      name: "lookBook",
      params: {
        id: route.params.id,
      },
      query: {
        contentIndexid: 0,
      },
    });
  }
};

onMounted(() => {
  newDataGet();
  bookInfoGet();
  bookCatalogueGet();
  hotGet();
  getRecord();
});
const newData = computed(() => {
  let date = new Date().getTime();
  let data = "";
  date = date - updateTime.value;
  date = parseInt(date / 1000 / 60 / 60 / 24);
  if (date > 365) {
    data = "一年前";
  } else if (date > 30) {
    data = "1个月前";
  } else if (date > 7) {
    data = "1个星期前";
  } else if (date > 6) {
    data = "6天前";
  } else if (date > 5) {
    data = "5天前";
  } else if (date > 4) {
    data = "4天前";
  } else if (date > 3) {
    data = "3天前";
  } else if (date > 2) {
    data = "2天前";
  } else if (date > 1) {
    data = "1天前";
  } else {
    data = "今天更新";
  }
  return data;
});
const load = computed(() => {
  return theTotalSection.value ? false : true;
});
</script>

<template>
  <div class="detail_view">
    <div class="start" v-if="theTotalSection == 0 ? false : true">
      <!-- 顶部 -->
      <nav>
        <div @click="router.push('/')" class="app"></div>
        <h1>书籍详情</h1>
        <div class="sourch">
          <p @click="router.push('/bookshelfv')">书架</p>
        </div>
      </nav>
      <!-- 小说介绍 -->
      <div class="bist">
        <ul>
          <li>
            <div class="img">
              <van-image width="100%" height="100%" :src="BookImg" />
            </div>
            <div class="font">
              <h1>
                <span>{{ BookTitle }} </span>
              </h1>
              <span>{{ BookKeyName }}-作者: {{ BookAuthor }}</span>
              <p>
                共{{ theTotalSection }}章{{
                  bookIntegrity == 3 ? "(连载中)" : "(已完结)"
                }}
              </p>
            </div>
            <div
              class="collect"
              :class="{ con: flag }"
              @click="clickFavorite"
            ></div>
          </li>
        </ul>
      </div>
      <!-- 阅读按钮 -->
      <div class="read">
        <div class="button" @click="goLookBook">
          <div class="img">
            <van-image width="100%" height="100%" src="/img/home/read.png" />
          </div>
          <span>免费阅读</span>
        </div>
      </div>
      <!-- 最新章节 -->
      <div class="newest">
        <span>最新</span>
        <p>{{ bookNewTitle }}</p>
        <a href="javascript:;">{{ newData }}</a>
      </div>
      <!-- 广告 -->
      <div class="advertising">
        <van-image width="100%" height="100%" src="/img/home/gg.jpg" />
      </div>
      <!-- 小说详情 -->
      <ul class="brief_introduction">
        <li :class="{ con: conIndex == 0 }" @click="conIndex = 0">简介</li>
        <li :class="{ con: conIndex == 1 }" @click="conIndex = 1">目录</li>
      </ul>
      <!-- 简介 -->
      <div class="brief_book" v-if="conIndex == 0">
        <p>
          {{ BookSummary }}
        </p>
        <h6>授权方：纵横中文网</h6>
      </div>
      <!-- 目录 -->
      <div class="catalogue_box" v-if="conIndex == 1">
        <ul class="catalogue">
          <li v-for="item in BookCatalogue" :key="item.index">
            {{ item.navLabel.substr(1) }}
          </li>
        </ul>
        <h2 class="more" @click="goCatalogueView">
          更多目录&nbsp;&nbsp;<span></span>
        </h2>
      </div>
      <!-- 读过还读 -->
      <div class="read_again">
        <h1 class="h1">
          <span>热门推荐</span>
          <span @click="cutSwitchover">换一换</span>
        </h1>
        <!-- 读过这本书的人还读 -->
        <div class="again_book">
          <ul>
            <li v-for="item in hot[hotIndex]" :key="item.id">
              <div class="img">
                <van-image width="100%" height="100%" :src="item.cover" />
              </div>
              <div class="font">
                <h1>
                  <span>{{ item.title }}</span>
                </h1>
                <span
                  >{{ item.integrity == 3 ? "连载中" : "已完结" }}-作者：{{
                    item.author
                  }}</span
                >
                <p>{{ item.content }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 尾部 -->
      <!-- 搜索 -->
      <div class="seek">
        <input type="text" placeholder="作者名/书名" />
        <div class="seek_btn"></div>
      </div>
      <br />

      <footer>
        <p>©2022天浪小说</p>
        <!-- <p>京ICP备 11009265号-5</p> -->
      </footer>
      <br />
    </div>
    <LoadComponent :load="load"></LoadComponent>
  </div>
</template>

<style lang="scss" scoped>
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f7f7f7;
  border-bottom: 1px solid #cbcbcb;
  .app {
    width: 17px;
    height: 17px;
    background: url("/public/img/home/left.png") no-repeat 12px 0px;
    background-size: 8px 13px;
    margin-top: 13px;
    padding-left: 11px;
    padding-right: 44px;
  }
  h1 {
    font-size: 17px;
    color: #333333;
    padding-top: 12px;
    padding-bottom: 10px;
    font-weight: normal;
  }
  .sourch {
    display: flex;
    width: 60px;
    padding-right: 12px;
    justify-content: flex-end;
    align-items: center;
    p {
      font-size: 12px;
      color: #999999;
    }
  }
}
.bist {
  ul {
    padding: 0 10px;
    background-color: #fff;
    overflow: hidden;
    height: auto;
    li {
      position: relative;
      display: flex;
      padding: 15px 0;
      border: none;
    }
  }
  li {
    .img {
      width: 75px;
      height: 100px;
      padding-right: 10px;
    }
  }
  .font {
    position: relative;
    h1 {
      height: 28px;
      line-height: 28px;
      font-weight: normal;
      font-size: 15px;
      color: #2e343f;
      margin-bottom: 14px;
    }
    & > span {
      display: inline-block;
      font-size: 12px;
      color: #666;
      height: 15px;
      line-height: 15px;
    }
    p {
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      color: #666;
      margin-top: 4px;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2; /*设置隐藏行数*/
      -webkit-box-orient: vertical;
    }
  }
  .collect {
    position: absolute;
    right: 10px;
    top: 20px;
    color: #fff;
    width: 18px;
    height: 16px;
    background: url("/public/img/home/notcollect.png") no-repeat center;
    background-size: 18px 16px;
    &.con {
      background: url("/public/img/home/collect.png") no-repeat center;
      background-size: 18px 16px;
    }
  }
}
.read {
  background-color: #fff;
  padding-bottom: 15px;
  border-bottom: 1px solid #efefef;
  .button {
    height: 32px;
    width: 94.7%;
    margin: 0 auto;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    background-color: #fff;
    color: #555555;
    display: flex;
    justify-content: center;
    align-items: center;
    .img {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }
  }
}
.newest {
  display: flex;
  position: relative;
  height: 40px;
  align-items: center;
  background-color: #fff;
  margin-bottom: 6px;
  span {
    display: inline-block;
    width: 38px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background-color: #8bc118;
    color: #fff;
    font-size: 12px;
    margin-right: 5px;
  }
  p {
    position: relative;
    width: 235px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000000;
    font-size: 14px;
    bottom: 2px;
  }
  a {
    position: absolute;
    right: 10px;
    font-size: 12px;
    color: #9f9f9f;
  }
}
.advertising {
  padding-top: 11px;
  height: 102px;
  background-color: #fff;
  margin-bottom: 14px;
  img {
    width: 100%;
    height: 100%;
  }
}
.brief_introduction {
  display: flex;
  padding: 10px 0;
  background-color: #fff;
  justify-content: center;
  li {
    width: 166px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #bbbbbb;
    border-radius: 2px;
    background-color: #ededed;
    color: #666666;
    font-size: 15px;
    text-align: center;
    &:nth-of-type(1) {
      border-right: none;
    }
    &.con {
      background-color: #fff;
      color: #ff0020;
    }
  }
}
.brief_book {
  padding-left: 20px;
  padding-right: 25px;
  background-color: #fff;
  padding-top: 4px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  p {
    line-height: 23px;
    color: #000000;
    font-size: 12px;
  }
  h6 {
    font-weight: normal;
    font-size: 12px;
    color: #9f9f9f;
    line-height: 24px;
  }
}
.catalogue {
  padding: 0 10px;
  background-color: #fff;
  margin-bottom: 10px;
  li {
    height: 36px;
    line-height: 36px;
    padding-top: 3px;
    padding-left: 10px;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #efefef;
  }
}
.catalogue_box {
  background-color: #fff;
  padding-bottom: 11px;
  margin-bottom: 6px;
  h2 {
    width: 88.8%;
    height: 33px;
    line-height: 33px;
    text-align: center;
    font-size: 15px;
    color: #000;
    font-weight: normal;
    margin: 0 auto;
    background-color: #f2f2f2;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
    & > span {
      display: inline-block;
      width: 5px;
      height: 10px;
      background: url("/public/img/home/right.png");
      background-size: cover;
    }
  }
}
.read_again {
  background-color: #fff;
  margin-bottom: 21px;
  .h1 {
    padding-left: 20px;
    padding-right: 10px;
    height: 33px;
    line-height: 33px;
    padding-top: 5px;
    font-weight: normal;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #efefef;
    span {
      font-size: 16px;
      &:nth-of-type(2) {
        font-size: 14px;
      }
    }
  }
  .again_book {
    ul {
      padding: 0 10px;
      background-color: #fff;
      height: 336px;
      overflow: hidden;
      li {
        display: flex;
        padding: 15px 0;
        border-bottom: 1px solid #efefef;
      }
    }
    li {
      .img {
        width: 60px;
        height: 80px;
        padding-right: 10px;
      }
    }
    .font {
      width: 81.1%;
      position: relative;
      h1 {
        font-weight: normal;
        font-size: 15px;
        color: #333333;
        margin-bottom: 4px;
      }
      & > span {
        font-size: 12px;
        color: #999999;
      }
      p {
        font-size: 12px;
        color: #999999;
        margin-top: 4px;
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2; /*设置隐藏行数*/
        -webkit-box-orient: vertical;
      }
    }
  }
}
.seek {
  display: flex;
  width: 353px;
  height: 33px;
  border: 1px solid #d2d6d8;
  margin: 0 auto;
  .seek_btn {
    width: 42px;
    background: #fff url("/public/img/home/search.png") no-repeat center center;
    background-size: 16px;
    border-left: 1px solid #d2d6d8;
  }
  input {
    width: 300px;
    padding-left: 10px;
    border: none;
    background-color: #fff;
  }
}
footer {
  p {
    text-align: center;
    font-size: 12px;
    color: #999999;
    margin-bottom: 10px;
  }
}
</style>